import QtQuick 2.9
import QtQuick.Controls 2.2

/// 自动适应，并且带解释弹窗

Rectangle {
    id: container
    width: 700
    height: 50
    radius: 10
    color: "#FFECB3"  // 柔和的黄色背景
    border.color: "#FFA000"  // 边框橙色
    border.width: 2

    property string tipText: "点击查看详情"
    property string colorText: "black"
    property string detailText: "这是详细解释的内容，点击空白处关闭。"

    gradient: Gradient {
        GradientStop { position: 0.0; color: "#FFE082" }
        GradientStop { position: 1.0; color: "#FFCA28" }
    }

    Text {
        id: tip
        color: colorText
        text: qsTr(tipText)
        font.bold: true
        anchors.centerIn: parent
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        fontSizeMode: Text.Fit  // 让字体自动适应大小
        minimumPixelSize: 10  // 设定最小字体大小
        font.pixelSize: 20  // 默认字体大小
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: container.color = "#FFD54F"
        onExited: container.color = "#FFECB3"
        onPressed: container.color = "#FFB300"
        onReleased: container.color = "#FFD54F"

        onClicked: detailPopup.open()
    }

    // 详情弹窗，点击空白处关闭
    Popup {
        id: detailPopup
        width: 400
        height: 150
        modal: true
        focus: true

        background: Rectangle {
            color: "#FFF3E0"
            radius: 10
            border.color: "#FF8A65"
            border.width: 2
        }

        contentItem: Text {
            id: detailLabel
            text: detailText
            color: "black"
            font.pixelSize: 16
            wrapMode: Text.WordWrap  // ✅ 允许自动换行
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            anchors.fill: parent
            anchors.margins: 20
        }

        // 监听文本高度，动态增加弹窗大小
        Timer {
            interval: 100  // 避免频繁触发，延迟 100ms
            running: true
            repeat: true
            onTriggered: {
                if (detailLabel.contentHeight > detailPopup.height - 40) {
                    detailPopup.width += 50;
                    detailPopup.height += 50;
                }
            }
        }
    }
}
